<template>
  <div id="box">
    <!-- header -->
    <van-nav-bar class="page-nav-bar" title="登录" />
    <!-- username   password -->
    <van-form ref="loginForm" @submit="onSubmit">
      <van-field 
          v-model="user.mobile"
          name="mobile" 
          left-icon="phone" 
          label="手机号" 
          placeholder="请输入手机号"
          :rules="userFormRules.mobile"
          type="number"
          maxlength="11">
      </van-field>

      <van-field
            v-model="user.code"
            name="code"
            left-icon="photo-fail"
            label="验证码"
            placeholder="请输入验证码"
            :rules="userFormRules.code"
            type="number"
            maxlength="6">

        <!-- 发送验证码 -->
        <template #button>
          <!-- 倒计时 --> 
          <van-count-down 
                v-if="isCountDownShow" 
                :time="1000 * 5" 
                @finish="isCountDownShow=false" 
                format="ss s" />
          <van-button 
                v-else
                native-type="button" 
                block 
                size="small" 
                type="primary" 
                @click="sentCode">
            发送验证码
          </van-button>
        </template>
      </van-field>

      <!-- 登录 -->
      <div style="margin: 16px;">
        <van-button block type="primary" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, getCode } from 'api/user.js'

export default {
  name: 'Login',
  data() {
    return {
      user: {
        mobile: '',
        code: ''
      },
      userFormRules: {
        mobile: [
          {
            requierd: true,
            message: '请正确填写手机号'
          },
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: '请正确填写手机号'
          }
        ],
        code: [
          {
            pattern: /^\d{6}$/,
            message: '验证码错误'
          }
        ]
      },
      data: [],
      isCountDownShow: false
    }
  },
  methods: {
    async onSubmit() {
      // 1. 获取用户数据
      const user = this.user

      // 2. 表单验证 （手机号验证）
      // 在组件中必须通过 this.$toast 来调用 Toast 组件
        // this.$toast.loading({
        //   message: '登陆中...', 
        //   forbidClick: true,
        //   duration: 1000,    // 0 表示持续展示
        // })

      // 下一个 toast 会覆盖 上一个 toast （so 只会显示一个 成功的 toast）
      // this.$toast.success('登录成功')

      // 3. 提交表单请求登录
      try {
        const res = await login(user);
        console.log('登陆成功' + res);
        this.$toast.success('登录成功');

        // 在 vuex 中保存 用户的 token(有效时间 2h) 和 refresh_token (有效时间 12d)
        this.$store.commit('setUser', res.xxx)
      } catch(err) {
        if (err.response.status !== 200) {
          this.$toast.fail('手机号或验证码错误');
        } else {
          // 网络或服务器出错
          this.$toast.fail('服务器链接失败，请检查网络');
        }
      } 
    },
    async sentCode() {
      // 1. 校验手机号码 （当手机号有效时发送验证码）
      try {
        await this.$refs.loginForm.validate('mobile');
        console.log('验证通过');
      } catch(err) {
        console.log('验证失败', err);
        return
      }
        
      // 2. 验证通过显示倒计时
      this.isCountDownShow = true

      // 3. 请求发送验证码
      try {
        await getCode(this.user.mobile);
      } catch(err) {
        this.isCountDownShow = false
        console.log('验证码发送失败，请重试', err);
      }
    }
  },
  created() {
    this.onSubmit();
  }
}
</script>

<style lang="less" scoped>
 
</style>